<template>
  <div class="register">
    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">注册</h3>
      <el-form-item prop="username">
        <el-input
            v-model="registerForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
        >
          <template #prefix>
            <svg t="1720436631591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10608" width="20" height="20"><path d="M508.6 63.8c16.5 0 33.1 0 49.6 5.5s33.1 11 49.6 16.5 27.6 16.5 38.6 22.1c11 11 22.1 16.5 27.6 27.6 16.5 22.1 27.6 38.6 33.1 66.2 5.5 22.1 11 44.1 16.5 66.2s5.5 49.6 5.5 71.7l11 11c0 5.5 5.5 11 5.5 16.5v22.1c0 11-5.5 22.1-5.5 27.6-5.5 5.5-5.5 11-11 16.5s-11 5.5-16.5 11c-5.5 11-5.5 22.1-11 27.6s-5.5 16.5-11 22.1c-5.5 5.5-5.5 11-11 16.5-11 11-22.1 16.5-27.6 22.1-5.5 5.5-11 16.5-16.5 33.1v27.6c0 11.1 5.5 16.5 5.5 27.6 5.5 11 11 16.5 22.1 27.6s22.1 16.5 38.6 22.1c16.5 5.5 33.1 11 49.6 16.5s33.1 11 49.6 16.5 33.1 16.5 44.1 22.1c11 11 22.1 22.1 27.6 38.6 5.5 11 5.5 22.1 5.5 33.1v44.1c0 16.5 0 27.6-5.5 38.6 0 11-5.5 22.1-11 27.6s-11 11-27.6 11-33.1 11-49.6 11c-22.1 5.5-44.1 5.5-66.2 11-27.6 5.5-49.6 5.5-77.2 5.5s-49.6 5.5-71.7 5.5H447.9c-22.1 0-44.1-5.5-71.7-5.5-22.1 0-49.6-5.5-71.7-5.5s-44.1-5.5-66.2-11-38.6-5.5-49.6-11-22.1-5.5-27.6-11-11-22.1-11-44.1c-5.5-22.1 0-55.2 5.5-93.8 5.5-22.1 11-38.6 27.6-49.6 16.5-11 33.1-22.1 49.6-27.6s38.6-11 60.7-16.5 38.6-11 55.2-22.1c11-5.5 22.1-16.5 27.6-22.1 5.5-5.5 11-16.5 16.5-22.1 5.5-5.5 5.5-16.5 5.5-22.1v-27.6c0-16.5-5.5-27.6-16.5-33.1s-16.5-16.5-27.6-27.6c-5.5-5.5-11-11-11-16.5-5.5-5.5-5.5-16.5-11-22.1-5.5-11-5.5-16.5-11-27.6-5.5 0-5.5-5.5-11-5.5l-11-11c-5.5-5.5-5.5-11-11-22.1-5.5-11-5.5-22.1-5.5-27.6 0-11 0-16.5 5.5-22.1 0-5.5 5.5-11 11-16.5 0-22.1 0-44.1 5.5-66.2 0-16.5 5.5-38.6 11-60.7s16.5-44.1 27.6-60.7c11-16.5 22.1-33.1 38.6-38.6 16.5-11 27.6-16.5 44.1-27.6 16.5-5.5 27.6-11 44.1-11 10.9 0.2 27.5 0.2 38.5 0.2z" fill="#00AA88" p-id="10609"></path></svg>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="registerForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleRegister"
        >
          <template #prefix>
            <svg t="1720436690926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11763" width="20" height="20"><path d="M837.281684 929.199158H177.771789a95.717053 95.717053 0 0 1-97.468631-97.468632V386.640842a95.717053 95.717053 0 0 1 97.468631-97.468631h662.770527a95.717053 95.717053 0 0 1 97.468631 97.468631v445.089684a100.540632 100.540632 0 0 1-100.729263 97.468632zM177.771789 354.169263a30.693053 30.693053 0 0 0-32.498526 32.498526v445.089685a30.693053 30.693053 0 0 0 32.498526 32.498526h662.770527a30.693053 30.693053 0 0 0 32.498526-32.498526V386.640842a30.693053 30.693053 0 0 0-32.498526-32.498526z" fill="#208BB5" p-id="11764"></path><path d="M720.330105 328.165053a30.693053 30.693053 0 0 1-32.498526-32.498527A185.101474 185.101474 0 0 0 502.649263 110.484211a183.053474 183.053474 0 0 0-185.182316 185.182315 32.498526 32.498526 0 1 1-64.970105 0 250.179368 250.179368 0 0 1 500.33179 0 32.552421 32.552421 0 0 1-32.498527 32.498527z" fill="#208BB5" p-id="11765"></path><path d="M512.404211 659.536842a107.223579 107.223579 0 1 1 107.196631-107.196631 108.166737 108.166737 0 0 1-107.196631 107.196631z m0-149.450105a42.226526 42.226526 0 1 0 42.226526 42.226526 43.115789 43.115789 0 0 0-42.226526-42.226526z" fill="#83D2EA" p-id="11766"></path><path d="M512.377263 808.986947a68.581053 68.581053 0 0 1-71.464421-61.736421v-107.223579a32.498526 32.498526 0 0 1 64.970105 0v103.962948h12.988632v-103.962948a32.498526 32.498526 0 1 1 64.970105 0v107.223579a68.581053 68.581053 0 0 1-71.464421 61.736421z" fill="#83D2EA" p-id="11767"></path></svg>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="确认密码"
            @keyup.enter="handleRegister"
        >
          <template #prefix>
            <svg t="1720436792917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12871" width="20" height="20"><path d="M838.4 981.333333H183.466667c-76.8 0-138.666667-61.866667-138.666667-138.666666V526.933333c0-76.8 61.866667-138.666667 138.666667-138.666666h654.933333c76.8 0 138.666667 61.866667 138.666667 138.666666v119.466667c0 17.066667-14.933333 32-32 32s-32-14.933333-32-32v-119.466667c0-40.533333-34.133333-74.666667-74.666667-74.666666H183.466667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v315.733334c0 40.533333 34.133333 74.666667 74.666667 74.666666h654.933333c40.533333 0 74.666667-34.133333 74.666667-74.666666v-21.333334c0-17.066667 14.933333-32 32-32s32 14.933333 32 32v23.466667c0 74.666667-61.866667 136.533333-138.666667 136.533333z" fill="#0000FF" p-id="12872"></path><path d="M808.533333 401.066667h-64v-64c8.533333-128-87.466667-238.933333-215.466666-249.6S290.133333 177.066667 279.466667 305.066667v98.133333h-64v-64C211.2 174.933333 341.333333 38.4 505.6 34.133333S806.4 157.866667 810.666667 322.133333v14.933334l-2.133334 64zM460.8 802.133333c-12.8 0-27.733333-4.266667-36.266667-14.933333l-72.533333-70.4c-12.8-12.8-14.933333-32-2.133333-44.8 12.8-12.8 32-14.933333 44.8-2.133333l2.133333 2.133333 66.133333 61.866667 168.533334-160c12.8-12.8 32-14.933333 44.8-2.133334 12.8 12.8 14.933333 32 2.133333 44.8 0 2.133333-2.133333 2.133333-4.266667 4.266667L497.066667 789.333333c-8.533333 8.533333-23.466667 14.933333-36.266667 12.8z" fill="#0000FF" p-id="12873"></path></svg>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
            size="large"
            v-model="registerForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleRegister"
        >
          <template #prefix>
            <svg t="1720436878908" class="icon" viewBox="0 0 1092 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13981" width="20" height="20"><path d="M561.29536 927.709867c-128.375467 128.375467-336.5888 128.375467-464.861867 0a328.533333 328.533333 0 0 1-0.1024-464.861867c115.848533-115.848533 296.482133-126.737067 424.96-33.518933L940.550827 10.171733a34.577067 34.577067 0 1 1 48.9472 48.9472l-48.9472 48.9472 122.299733 122.299734a34.577067 34.577067 0 1 1-48.9472 48.9472L891.603627 157.013333l-73.386667 73.386667 122.333867 122.299733a34.577067 34.577067 0 1 1-48.9472 48.9472l-122.333867-122.333866-196.437333 196.437333c116.258133 129.024 112.708267 327.748267-11.502934 451.959467zM145.278293 511.7952a259.515733 259.515733 0 0 0 0 367.104 259.515733 259.515733 0 1 0 367.069867-367.104 259.515733 259.515733 0 0 0-367.069867 0z" fill="#FF5A68" p-id="13982"></path></svg>
          </template>
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img" alt="验证码"/>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            @click.prevent="handleRegister"
        >
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
        <div style="float: right;">
          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup >
import {getCurrentInstance, reactive, ref} from "vue";
import {getCodeImg,register} from "@/api/userInfo";
import {ElMessageBox} from "element-plus";
import router from "@/router/index.js";
const { proxy } = getCurrentInstance();
const equalToPassword = (rule, value, callback) => {
  if (registerForm.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const registerRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入您的账号" },
    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  //code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
const captchaEnabled = ref(true);

const registerForm = reactive({
  username: "",
  password: "",
  confirmPassword: "",
  code: "",
  uuid: ""
});



function handleRegister() {
  if (registerForm.code === '' || registerForm.code == null){
    ElMessageBox.alert("验证码不能为空","系统提示",{
      type:"warning"
    })
    return
  }

  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      register(registerForm).then(res => {
        const {data} = res
        if (data.code === 200){
          const username = registerForm.username;
          ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
            dangerouslyUseHTMLString: true,
            type: "success",
          })
          router.push("/login")
        }else{
          ElMessageBox.alert(data.msg,"系统提示",{
            type:"warning"
          })

          loading.value = false
          getCode()
        }
      })
    }
  });
}

function getCode() {
  registerForm.code = null
  getCodeImg().then(res => {
    captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.data.img;
      registerForm.uuid = res.data.uuid;
    }
  });
}

getCode();
</script>
<style lang='scss' scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("/registerImg.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>